<script setup>
	import {
		navigateToMemorialRecord,
		navigateToRecharge,
		redirectToToHome,
		navigateToLighting,
		navigateToLightCandle,
		navigateToLantern,
		navigateToSpace,
		navigateToSpaceDetails,
		navigateToUpToInviteCreate,
		navigateToUpToRecommendCreate,
		navigateBack,
		navigateToUserHelp,
		navigateToAiDialogue,
		navigateToAiLogin,
		navigateToWishingTree,
	} from "@/assets/scripts/navigate.js"
	import {
		useRoute
	} from 'vue-router'
	import {
		getItem
	} from "@/assets/scripts/aiStorage.js"
	import {
		memorialHallApi,
		relationApi,
		sendMsgApi,
		getMsgApi,
		getOfferingListApi,
		offeringsTypeApi,
		offeringsContentApi,
		addOfferingListApi,
		getEverlastingLampApi,
		getFestivallistApi,
	} from "@/assets/api/other/memorialHall.js"
	import {
		getCommonCheckListApi,
		delCommonCheckListApi,
		updateCommonCheckListApi,
	} from "@/assets/api/other/spaceDetails.js"
	import {
		onActivated,
		onBeforeUnmount,
		onDeactivated,
		onMounted,
		ref,
		watch,
	} from "vue";
	import leaveMessageCard from '@/components/leaveMessageCard.vue'
	import bgMusic from '@/assets/music/bgMusic.mp3'
	import {
		getRelationListApi,
	} from "@/assets/api/other/space.js"
	import {
		getInfoApi,
	} from "@/assets/api/other/login.js"
	import sub1 from '/static/image/jibai/sub-1.gif'
	import sub2 from '/static/image/jibai/sub-2.gif'
	import sub3 from '/static/image/jibai/sub-3.gif'
	import sub4 from '/static/image/jibai/sub-4.gif'

	const isMusic = ref(false)
	const innerAudioContext = ref(null)
	const pageCurrent = ref(1)
	const oblationIndex = ref(-1)
	const lightingIndex = ref(0)
	const msgInpHeight = ref(24)
	const relation = ref('')
	const lightingList = ref([])
	const relationPicker = ref()
	const id = ref('')
	const msgInp = ref('')
	const currentId = ref('')
	const codeInp = ref('')
	const isVerify = ref(false)
	const jibaiShow = ref(false)
	const dataSource = ref({
		mmBorn1: "",
		mmPassAwayDate1: "",
	})
	const verifyPopup = ref()
	const msgPopup = ref()
	const festivalPopup = ref()
	const msgModal = ref()
	const msgDetail = ref("")
	const guidePopup = ref()
	const familyPopup = ref()
	const lightingPopup = ref()
	const lanternPopup = ref()
	const oblationPopup = ref()
	const oblationdescPopup = ref()
	const lanternList = ref([])
	const offeringsIndex = ref(0)
	const offerings = ref([])
	const offeringsTotal = ref(0)
	const offeringsContent = ref([])
	const offeringsContentTotal = ref(0)
	const leaveMessageList = ref([])
	const everlastingLampList = ref([])
	const candleLightList = ref([])
	const oblationList = ref([])
	const imageList = ref([])
	const videoList = ref([])
	const festivalList = ref([])
	const familyList = ref([])
	const userInfo = ref({})
	const isFamliy = ref(false)
	const isShowMenu = ref(false)
	const currentGifUrl = ref('')
	const gifUrls = ref({
		sub1,
		sub2,
		sub3,
		sub4
	})

	const relationColumnData = [
		['儿子', '女儿', '孙子', '孙女', '外孙', '外孙女', '外甥', '外甥女', '侄子侄女', '儿媳', '女婿', '孙媳妇', '孙女婿', '外孙媳妇', '外孙女婿', '外甥媳妇',
			'外甥女婿', '侄媳妇', '侄女婿', '外孙/外孙女', '孙子/孙女', '儿子/女儿', '侄子/侄女', '外甥外甥女', '侄儿', '子侄辈', '后裔'
		],
		['丈夫', '妻子', '姐姐', '妹妹', '哥哥', '弟弟', '表哥', '表姐', '堂哥', '堂姐', '堂弟', '堂妹', '表弟', '表妹', '表嫂', '表姐夫', '姐夫',
			'嫂子',
			'弟媳', '弟妹', '哥姐', '妹夫'
		],
		['父亲', '母亲', '伯伯', '伯母', '叔叔', '婶婶', '姑姑', '姑父', '姨妈', '姨夫', '舅舅', '舅妈', '双亲', '父母', '公婆', '岳父母'],
		['挚友', '亲友', '朋友', '战友', '老师', '同学', '学生', '领导', '同事', '邻居', '远亲'],
		['祖父', '祖母', '外祖父', '外祖母', '祖父母', '外祖父母'],
		['粉丝', '故人', '男朋友', '女朋友', '其他'],
	]
	const relationColumns = ref([
		[
			'儿孙辈', '同辈', '父辈', '亲朋好友', '祖辈', '其他'
		],
		[]
	])

	const playGif = (gifName) => {
		currentGifUrl.value = gifUrls.value[gifName] + `?t=${new Date().getTime()}`;
		jibaiShow.value = false
	}

	const handleMenuClick = (res) => {
		if (res === '逝者信息') {
			navigateToSpaceDetails(id.value, 0)
		} else if (res === '追忆空间') {
			navigateToSpace(id.value)
		} else if (res === '常见问题') {
			navigateToUserHelp()
		}
	}

	const offeringsContent_init = async () => {
		const res = await offeringsContentApi(offerings.value[offeringsIndex.value].id)
		if (res.code !== 200) {
			return
		}
		offeringsContent.value = res.rows
		offeringsContentTotal.value = res.total
		if (offeringsContentTotal.value === 0) {
			oblationIndex.value = -1
		} else {
			oblationIndex.value = 0
		}
	}

	const handleFamily = () => {
		guidePopup.value.close()
		familyPopup.value.open()
	}

	const handleTourist = () => {
		guidePopup.value.close()
	}

	const giveOblation_handleClick = async () => {
		if (oblationIndex.value == -1) {
			return
		}
		if (oblationList.value.length >= 20) {
			uni.showToast({
				title: '暂无位置摆放',
				icon: 'error'
			})
			return
		}
		const business = offeringsContent.value[oblationIndex.value]
		const res = await addOfferingListApi({
			meMemorialId: id.value,
			olType: '祭奠',
			businessId: business.id,
			memorialValue: business.ocNum,
			ocNum: business.ocNum,
			ocTotay: business.ocTotay,
			olImg: business.olImg,
			olName: business.olName,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '赠送成功',
				icon: 'success',
				complete: () => {
					data_init()
					oblationList_init()
					oblationPopup.value.close()
				}
			})
		} else {
			uni.showToast({
				title: '余额不足请充值',
				icon: 'error',
			})
		}
	}

	const offerings_handleClick = (item) => {
		if (item.id === offerings.value[offeringsIndex.value].id) {
			return
		}
		offeringsIndex.value = offerings.value.findIndex(o => o.id === item.id)
		offeringsContent_init()
	}

	const handleSelectRelation = () => {
		relationPicker.value.setColumnValues(1, relationColumnData[0]);
		relationPicker.value.open()
	}

	const relation_handleChange = (e) => {
		if (e.columnIndex == 0) {
			relationPicker.value.setColumnValues(1, relationColumnData[e.index]);
		}
	}

	const relation_handleConfirm = (e) => {
		relation.value = e.value[1]
		relationPicker.value.close()
	}

	const familyBtn_handleConfirm = async () => {
		if (relation.value.length == 0) {
			uni.showToast({
				title: '请选择关系'
			})
			return
		}
		const res = await relationApi({
			isPass: '否',
			isAdmin: '否',
			meMemorialId: id.value,
			relation: relation.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '成功',
				icon: 'success',
				complete: () => {
					familyPopup.value.close()
					data_init() // 请求数据
					familyList_init() // 重新刷新亲友团
				}
			})
		}
		relation.value = ''
	}

	const isMusic_handleChange = () => {
		if (isMusic.value) {
			innerAudioContext.value.stop()
		} else {
			innerAudioContext.value.play()
		}
		isMusic.value = !isMusic.value
	}

	const oblation_handleClick = (index) => {
		oblationPopup.value.open()
	}

	const oblationClose_handleClick = () => {
		oblationPopup.value.close()
	}

	const lantern_handleClick = (index) => {
		lanternPopup.value.open()
	}

	const festival_handleClick = (index) => {
		festivalPopup.value.open()
	}

	const lanternPopupClose_handleClick = () => {
		lanternPopup.value.close()
	}

	const lightingBtnList_handleClick = async (index) => {
		lightingIndex.value = index
		lightingPopup.value.open()
	}

	const lightingPopupClose_handleClick = () => {
		lightingPopup.value.close()
	}

	const isFamliy_handleClick = () => {
		familyPopup.value.open()
	}

	const focus_handleClick = async () => {
		const res = await relationApi({
			isPass: '是',
			isAdmin: '否',
			meMemorialId: id.value,
			relation: '关注',
		})
		if (res.code === 200) {
			uni.showToast({
				title: '关注成功',
				icon: 'success',
				complete: () => {
					data_init() // 请求数据
				}
			})
		}
	}

	const handleSacrifice = () => {
		festivalPopup.value.close()
		oblationPopup.value.open()
	}

	const isFamliyClose_handleClick = () => {
		familyPopup.value.close()
	}

	const aiCard_handleClick = () => {
		const aiTitle = getItem(id.value)
		if (aiTitle) {
			navigateToAiDialogue(id.value)
		} else {
			navigateToAiLogin(id.value, dataSource.value.relation, dataSource.value.mmName1)
		}
	}

	const msg_handleClick = () => {
		msgPopup.value.open()
	}

	const msgClose_handleClick = () => {
		msgPopup.value.close()
	}

	const handleUpdateMsg = async () => {
		if (msgInp.value.length == 0) {
			uni.showToast({
				title: '请输入留言内容'
			})
			return
		}
		const row = leaveMessageList.value.find(o => o.id === currentId.value)

		const res = await updateCommonCheckListApi({
			...row,
			ccContent: msgInp.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '修改成功',
				icon: 'success',
				complete: () => {
					msgPopup.value.close()
					leaveMessageList_init() // 请求留言列表
				}
			})
		} else {
			uni.showToast({
				title: '修改失败',
				icon: 'error',
			})
		}
		msgInp.value = ''
		currentId.value = ''
	}

	const handleSendMsg = async () => {
		if (msgInp.value.length == 0) {
			uni.showToast({
				title: '请输入留言内容'
			})
			return
		}

		const res = await sendMsgApi({
			ccType: '留言',
			ccContent: msgInp.value,
			meMemorialId: id.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '留言成功',
				icon: 'success',
				complete: () => {
					msgPopup.value.close()
					leaveMessageList_init() // 请求留言列表
				}
			})
		}
		msgInp.value = ''
	}

	const handleVerify = () => {
		if (codeInp.value == dataSource.value.pwd) {
			uni.showToast({
				title: '验证成功',
				icon: 'success',
				success: () => {
					verifyPopup.value.close()
					isVerify.value = true
				}
			})
		} else {
			uni.showToast({
				title: '验证失败',
				icon: 'error',
			})
		}
	}

	const remainingTime = (timeString) => {

		if (!timeString) {
			return ''
		}

		// 将时间字符串转换为日期对象
		let targetDate = new Date(timeString.replace(/-/g, '/'));

		// 获取当前时间
		let currentDate = new Date();

		// 计算剩余时间（单位：毫秒）
		let remainingTime = targetDate.getTime() - currentDate.getTime();

		// 如果目标时间已经过去，则返回负数
		if (remainingTime < 0) {
			return "已结束";
		}

		// 将剩余时间转换为天、小时、分钟和秒
		let days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
		let hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		let minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
		let seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

		// 构建剩余时间的字符串表示
		let remainingTimeString = "";
		if (days > 0) {
			remainingTimeString += days + "天 ";
		}
		if (hours > 0) {
			remainingTimeString += hours + "小时 ";
		}
		if (minutes > 0) {
			remainingTimeString += minutes + "分钟 ";
		}

		return remainingTimeString;
	}

	const lightingList_init = async () => {
		for (let i = 0; i < everlastingLampList.value.length; i++) {
			const element = everlastingLampList.value[i]
			const res = await getOfferingListApi(id.value, '点灯', element.elName)
			if (res.code === 200) {
				lightingList.value[i] = res.rows
			}
		}
	}

	const oblationPopup_handleChange = (e) => {
		if (e.show) {
			oblationdescPopup.value.open()
		} else {
			oblationdescPopup.value.close()
		}
	}

	const handleLookMsg = (item) => {
		msgDetail.value = item.ccContent
		msgModal.value.open()
	}

	const handleUpdateMessage = (id) => {
		currentId.value = id
		const row = leaveMessageList.value.find(o => o.id === id)
		msgInp.value = row.ccContent
		msgPopup.value.open()
	}

	const handleClose = (id) => {
		uni.showModal({
			title: '温馨提示',
			content: '请再次确认是否删除',
			success: async (e) => {
				if (e.confirm) {
					const res = await delCommonCheckListApi(id)
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							complete: () => {
								data_init() // 纪念馆数据
							}
						})
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'error',
						})
					}
				}
			}
		})
	}

	onMounted(async () => {
		await route_init() // 路由参数
		await data_init() // 纪念馆数据
		await familyList_init() // 亲友团列表
		await getFestivalList_init() // 节日数据
		check_init()
		music_init() // 背景音乐
		leaveMessageList_init() // 请求留言列表
		offerings_init() // 祭品种类列表	
		lanternList_init() // 请求留言列表	
		oblationList_init() // 祭品列表	
		everlastingLamp_init() // 长明灯列表	
		candleLightList_init() // 烛光列表	
		imageList_init() // 相册数据
		videoList_init() // 视频数据
	})

	onActivated(async () => {
		await route_init() // 路由参数
		await data_init() // 纪念馆数据
		await familyList_init() // 亲友团列表
		await getFestivalList_init() // 节日数据
		leaveMessageList_init() // 请求留言列表
		offerings_init() // 祭品种类列表	
		lanternList_init() // 请求留言列表	
		oblationList_init() // 祭品列表	
		everlastingLamp_init() // 长明灯列表	
		candleLightList_init() // 烛光列表	
		imageList_init() // 相册数据
		videoList_init() // 视频数据
	})

	onBeforeUnmount(() => {
		music_unmount() // 背景音乐
	})

	onDeactivated(() => {
		music_unmount() // 背景音乐
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.id && route.query.id !== 'undefined') {
			id.value = route.query.id
		}
		if (route.query.pageCurrent && route.query.pageCurrent !== 'undefined') {
			pageCurrent.value = route.query.pageCurrent
		}
	}

	const data_init = async () => {
		const res = await memorialHallApi(id.value)
		if (res.code === 200) {
			dataSource.value = res.data
		}
	}

	const familyList_init = async () => {
		const res = await getRelationListApi(id.value)
		if (res.code !== 200) {
			return
		}
		const resRes = await getInfoApi()
		if (resRes.code !== 200) {
			return
		}
		userInfo.value = resRes.user
		uni.setStorageSync('user', resRes.user)
		isFamliy.value = res.rows.some(item => item.userId === userInfo.value.userId)
	}

	const music_init = () => {
		innerAudioContext.value = uni.createInnerAudioContext();
		innerAudioContext.value.src = bgMusic;
		innerAudioContext.value.onPlay(() => {
			console.log('开始播放');
		});
	}

	const music_unmount = () => {
		innerAudioContext.value.stop()
		isMusic.value = false
	}

	const leaveMessageList_init = async () => {
		const res = await getMsgApi(id.value)
		if (res.code === 200) {
			leaveMessageList.value = res.rows
		}
	}

	const offerings_init = async () => {
		const res = await offeringsTypeApi()
		if (res.code !== 200) {
			return
		}
		offerings.value = res.rows.map(item => {
			return {
				name: item.otName,
				...item,
			}
		})
		offeringsTotal.value = res.total
		if (offeringsTotal.value === 0) {
			return
		}
		offeringsContent_init()
	}

	const lanternList_init = async () => {
		const res = await getOfferingListApi(id.value, '灯笼', '')
		if (res.code === 200) {
			lanternList.value = res.rows
		}
	}

	const candleLightList_init = async () => {
		const res = await getOfferingListApi(id.value, '烛光', '')
		if (res.code === 200) {
			candleLightList.value = res.rows
		}
	}

	const everlastingLamp_init = async () => {
		const res = await getEverlastingLampApi()
		if (res.code === 200) {
			everlastingLampList.value = res.rows
			lightingList_init() // 点灯列表    
		}
	}

	const imageList_init = async () => {
		const res = await getCommonCheckListApi(id.value, '相册')
		if (res.code === 200) {
			imageList.value = res.rows
		}
	}

	const videoList_init = async () => {
		const res = await getCommonCheckListApi(id.value, '视频')
		if (res.code === 200) {
			videoList.value = res.rows
		}
	}

	const getFestivalList_init = async () => {
		const res = await getFestivallistApi()
		if (res.code === 200) {
			festivalList.value = res.rows
		}
	}

	const oblationList_init = async () => {
		const res = await getOfferingListApi(id.value, '祭奠', "", 1, 999, true)
		if (res.code === 200) {
			const rows = []
			for (let i = 0; i < res.rows.length; i++) {
				const item = res.rows[i]
				const index = rows.findIndex(o => o.businessId === item.businessId)
				if (index !== -1) {
					rows[index].count += 1
				} else {
					rows.push({
						...item,
						count: 1
					})
				}
			}
			oblationList.value = rows
		}
	}

	const check_init = () => {
		if (dataSource.value.isPublic == 1) {
			verifyPopup.value.open()
		} else {
			isVerify.value = true
		}
		if (festivalList.value.length > 0) {
			festivalPopup.value.open()
		} else if (!isFamliy.value) {
			guidePopup.value.open()
		}
	}
</script>

<template>
	<view class="page-content-posa page-wrap">
		<uv-modal ref="msgModal" title="留言消息" confirmText="关闭">
			<view class="slot-content" style="width: 100%;">
				<scroll-view scroll-y="true" class="msg-scroll-view">
					<!-- <view class='msg' v-html="msgDetail"></view> -->
					<uni-easyinput style="display: block; width: 100%; " :styles="{disableColor:'#333'}" type="textarea"
						disabled v-model="msgDetail" placeholder="输入你对逝者的思念"></uni-easyinput>
				</scroll-view>
			</view>
		</uv-modal>

		<uv-popup ref="guidePopup" mode="center" round='10' closeable>
			<view class="guide-popup">
				<view class="px-normal box">
					<view class="font-fs18 font-wb">
						欢迎来到本纪念馆
					</view>
					<view class="font-fs14 mt-normal">
						请选择您与逝者的关系
					</view>
					<uv-button class="m-normal" text="我是亲朋好友" shape="circle" type='success'
						@click="handleFamily"></uv-button>
					<uv-button class="m-normal" text="立即祭祀" shape="circle" type='info'
						@click="handleTourist"></uv-button>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="festivalPopup" mode="center" closeable>
			<view class="festival-popup" v-if="festivalList.length">
				<swiper style="height: 227px;" :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item v-for="(item, index) in festivalList" :key="index">
						<view class="swiper-item">
							<view class="box">
								<image :src="item.fImg" mode="aspectFill" class="image image-fill"></image>
							</view>
							<view class="p-normal mt-small">
								<view class="font-fs14 font-wb title">
									{{item.fName}}祭祀
								</view>
								<view class="mt-normal text-ellipsis-2 font-fs12 desc">
									{{item.fDesc}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="pb-normal">
					<view class="mt-normal px-normal">
						<uv-button text="立即祭祀" color="#d86a1b" @click="handleSacrifice"></uv-button>
					</view>
				</view>
			</view>
		</uv-popup>

		<uv-picker ref="relationPicker" :columns="relationColumns" style="z-index: 13000;"
			@change="relation_handleChange" @confirm="relation_handleConfirm"></uv-picker>

		<uv-popup ref="msgPopup" mode="bottom">
			<view class="msg-popup">
				<view class="d-flex d-flex-jcsb d-flex-aic px-normal head">
					<view class="font-fs18">
						留言内容
					</view>
					<view class="" @click="msgClose_handleClick">
						关闭
					</view>
				</view>
				<view class="p-normal">
					<uni-easyinput type="textarea" v-model="msgInp" placeholder="输入你对逝者的思念"></uni-easyinput>
					<!-- <uv-textarea v-model="msgInp" placeholder="输入你对逝者的思念" :height='msgInpHeight'
						@focus="msgInpHeight = 70" @blur="msgInpHeight = 24"></uv-textarea> -->
					<uv-button v-if="currentId" @click="handleUpdateMsg" class="mt-normal" type="primary"
						text="修改"></uv-button>
					<uv-button v-else @click="handleSendMsg" class="mt-normal" type="success" text="留言"></uv-button>
				</view>
				<scroll-view class="p-normal body" scroll-y="true">
					<view class="mt-normal" v-for="(item, index) in leaveMessageList" :key="index"
						@click="handleLookMsg(item)">
						<leaveMessageCard @onUpdate='handleUpdateMessage(item.id)'
							:isShowEdit='dataSource.createBy == userInfo.userId' :data="item"
							:isShowDel='dataSource.createBy == userInfo.userId' @onDelete='handleClose(item.id)'>
						</leaveMessageCard>
					</view>
				</scroll-view>
			</view>
		</uv-popup>

		<uv-popup ref="oblationdescPopup" mode="top" :overlay="true" :safeAreaInsetTop='true'>
			<view class="oblationdesc-popup" v-if="offeringsContent[oblationIndex]">
				<view class="d-flex d-flex-aic">
					<view class="d-flex-fs0 pic">
						<image :src="offeringsContent[oblationIndex].ocImg" mode="scaleToFill" class="image image-fill">
						</image>
					</view>
					<view class="d-flex-fx1 ml-normal">
						<view class="font-fs16 font-wb name">
							{{offeringsContent[oblationIndex].ocName}}
						</view>
						<view class="text-ellipsis-2 font-fs14 mt-small remark">
							{{offeringsContent[oblationIndex].remark}}
						</view>
					</view>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="oblationPopup" mode="bottom" :overlayOpacity='0.05' @change="oblationPopup_handleChange">
			<view class="oblation-popup">
				<view class="d-flex d-flex-jcsb d-flex-aic px-normal head">
					<view class="font-fs18">
						共{{offeringsTotal}}类祭品(本类含{{offeringsContentTotal}}种)
					</view>
					<view class="" @click="oblationClose_handleClick">
						关闭
					</view>
				</view>
				<uv-tabs :list="offerings" :current='offeringsIndex' @click="offerings_handleClick"></uv-tabs>
				<scroll-view class="body" scroll-y="true">
					<view class="emtpy" v-if="!offeringsContent.length">
						<image src="@/assets/pic/emtpy.png" mode="widthFix" class="image image-fill-x"></image>
					</view>
					<view :class="['item', {'con':oblationIndex === index}]" v-for="(item, index) in offeringsContent"
						:key="index" @click="oblationIndex=index">
						<view class="pic">
							<image :src="item.ocImg" mode="scaleToFill" class="image image-fill"></image>
						</view>
						<view class="font-fs14 title">
							{{item.ocName}}
						</view>
						<view class="font-fs12 money">
							{{item.ocNum}}缅怀币
						</view>
						<view class="font-fs12 date">
							时长{{item.ocTotay}}天
						</view>
					</view>
				</scroll-view>
				<view class="d-flex d-flex-jcsb d-flex-aic px-normal foot">
					<view class="d-flex d-flex-aic">
						<view class="mr-small">
							送给
						</view>
						<div class="d-flex" style="height: 30px;">
							<div class="avatar"
								style="width: 30px; height: 30px; border-radius: 50%; overflow: hidden;">
								<image :src="dataSource.mmImg1" mode="widthFix" class="image image-fill-x"></image>
							</div>
							<div class="avatar" v-if="
								dataSource.mmType==='mm_type_two'"
								style="width: 30px; height: 30px; border-radius: 50%; overflow: hidden; position: relative; right: 12px; margin-right: -12px;">
								<image :src="dataSource.mmImg2" mode="widthFix" class="image image-fill-x"></image>
							</div>
						</div>
					</view>
					<uv-button type="error" shape="circle" text="确定" @click="giveOblation_handleClick"
						:customStyle="{height: '30px', width:'100px'}"></uv-button>
					<view class="d-flex d-flex-aic">
						<view class="icon">
							<image src="/assets/pic/coin.png" mode="widthFix" class="image image-fill-x"></image>
						</view>
						<view class="mx-small font-fs14">{{userInfo.commemorativeCoin}}</view>
						<view class="font-fs14 btn" @click="navigateToRecharge">充值</view>
					</view>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="familyPopup" mode="center" round='10' closeable>
			<view class="family-popup">
				<view class="font-fs20 font-wb d-flex d-flex-jcc color-333">
					欢迎你加入亲友团
				</view>
				<view class="px-big mt-big">
					<uv-input placeholder="如儿子,女儿" disabled border="none" v-model="relation"
						@click="handleSelectRelation" :customStyle="{height:'46px', padding:'0 15px'}">
						<template v-slot:prefix>
							<uv-text text="您是逝者的:" margin="0 3px 0 0" type="tips"></uv-text>
						</template>
					</uv-input>
				</view>
				<view class="px-big mt-big">
					<view class="px-big ">
						<uv-button type="success" text="确定" shape='circle' @click="familyBtn_handleConfirm"></uv-button>
					</view>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="lightingPopup" mode="center" round='10' closeable>
			<view class="lighting-popup">
				<view class="lighting-banner" v-if="everlastingLampList.length&&lightingIndex!==-1">
					<image class="image image-fill-x" src="@/assets/pic/lighting-popup-bg.png" mode="widthFix"></image>
					<view class="lighting d-flex d-flex-fdc d-flex-aic">
						<view class="icon">
							<image class="image image-fill" :src="everlastingLampList[lightingIndex].elImg"
								mode="scaleToFill">
							</image>
						</view>
						<view class="font-fs18 mt-small text">{{ everlastingLampList[lightingIndex].elName }}</view>
					</view>
				</view>
				<scroll-view class="lighting-content" scroll-y="true">
					<view class="emtpy" v-if="!lightingList[lightingIndex].length">
						<image src="@/assets/pic/emtpy.png" mode="widthFix" class="image image-fill-x"></image>
					</view>
					<view class="d-flex d-flex-aic p-normal item" v-for="(item, index) in lightingList[lightingIndex]"
						key="index">
						<uv-avatar :src="item.sysUser.avatar" shape="square" size="60"></uv-avatar>
						<view class="d-flex-fx1 ml-big font-fs14">
							<view class="d-flex">
								赠送者: <view class="ml-normal text">{{item.sysUser.nickName}}</view>
							</view>
							<view class="d-flex">
								点亮时间: <view class="ml-normal text">{{item.createTime.slice(0,10)}}</view>
							</view>
							<view class="d-flex">
								剩余时间: <view class="ml-normal last-time">
									{{ remainingTime(item.olTime) ? remainingTime(item.olTime) : '已结束' }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="p-normal">
					<uv-button type="success" text="我也要点灯" @click="navigateToLighting(id)"></uv-button>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="lanternPopup" mode="center" round='10' closeable>
			<view class="lantern-popup">
				<view class="lantern-banner">
					<image class="image image-fill-x" src="@/assets/pic/lantern-popup-bg.png" mode="widthFix"></image>
				</view>
				<scroll-view class="lantern-content" scroll-y="true">
					<view class="emtpy" v-if="!lanternList.length">
						<image src="@/assets/pic/emtpy.png" mode="widthFix" class="image image-fill-x"></image>
					</view>
					<view class="d-flex d-flex-aic p-normal item" v-for="(item, index) in lanternList" key="index">
						<uv-avatar :src="item.sysUser.avatar" shape="square" size="60"></uv-avatar>
						<view class="d-flex-fx1 ml-big font-fs14">
							<view class="d-flex">
								赠送者: <view class="ml-normal text">{{item.sysUser.nickName}}</view>
							</view>
							<view class="d-flex">
								新与心愿: <view class="ml-normal text">{{item.olName}}</view>
							</view>
							<view class="d-flex">
								点亮时间: <view class="ml-normal text">{{item.createTime.slice(0,10)}}</view>
							</view>
							<view class="d-flex">
								剩余时间: <view class="ml-normal last-time">
									{{ remainingTime(item.olTime) ? remainingTime(item.olTime) : '已结束' }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="p-normal">
					<uv-button type="success" text="我要挂灯笼" @click="navigateToLantern(id)"></uv-button>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="verifyPopup" mode="center" round='10' overlay-opacity="1" :closeOnClickOverlay="false">
			<view class="verify-popup">
				<view class="font-fs20 font-wb d-flex d-flex-jcc color-333">
					验证纪念馆密码
				</view>
				<view class="px-big mt-big">
					<uv-input placeholder="输入验证码" v-model="codeInp" class="inp">
					</uv-input>
				</view>
				<view class="px-big mt-big">
					<view class="px-big">
						<uv-button type="success" text="验证" shape='circle' @click="handleVerify"></uv-button>
					</view>
					<view class="px-big mt-normal">
						<uv-button text="返回" shape='circle' @click="navigateBack"></uv-button>
					</view>
				</view>
			</view>
		</uv-popup>

		<view class="bg-grey-fill over page-wrap">
			<!-- <uv-navbar :fixed="false" bgColor="rgba(255,255,255,0.8)" class="navbar">
				<template #left>
					<uni-icons type="home-filled" size="30" color="#303133" @click="navigateBack"></uni-icons>
				</template>
				<template #center>
					<uv-row class="inp-search">
						<uv-col>
							纪念馆
						</uv-col>
					</uv-row>
				</template>
				<template #right>
					<view class="menu">
						<text>菜单</text>
						<view class="show-box">

						</view>
					</view>
				</template>
			</uv-navbar> -->
			<view class="navbar-cnm page-wrap">
				<view class='d-flex d-flex-aic nav-left' @click='navigateBack'>
					<!-- <uni-icons type="home-filled" size="30" color="#303133" @click="redirectToToHome"></uni-icons> -->
					<uv-icon name="arrow-left" size="19"></uv-icon>
					返回首页
				</view>
				<view class='nav-center'>
					<uv-row class="inp-search">
						<uv-col>
							私人尊享纪念馆
						</uv-col>
					</uv-row>
				</view>
				<view class='nav-right'>
					<text @click="isShowMenu = true">菜单</text>
					<view class="menu" v-if="isShowMenu" @click="isShowMenu = false">
						<div class="show-box">
							<view class="item" @click="handleMenuClick('逝者信息')">
								逝者信息
							</view>
							<view class="item" @click="handleMenuClick('追忆空间')">
								追忆空间
							</view>
							<view class="item" @click="handleMenuClick('常见问题')">
								常见问题
							</view>
						</div>
					</view>
				</view>
			</view>
			<view class="tab-list" v-show="false">
				<view :class="['item',{'con':pageCurrent==0}]" @click="pageCurrent=0">
					首页
				</view>
				<view :class="['item',{'con':pageCurrent==1}]" @click="pageCurrent=1">
					祭祀
				</view>
			</view>
			<view class="info">
				<div class="d-flex" style="height: 30px;">
					<div class="avatar" style="width: 30px; height: 30px; border-radius: 50%; overflow: hidden;">
						<image :src="dataSource.mmImg1" mode="widthFix" class="image image-fill-x"></image>
					</div>
					<div class="avatar" v-if="
						dataSource.mmType==='mm_type_two'"
						style="width: 30px; height: 30px; border-radius: 50%; overflow: hidden; position: relative; right: 12px; margin-right: -12px;">
						<image :src="dataSource.mmImg2" mode="widthFix" class="image image-fill-x"></image>
					</div>
				</div>
				<!-- <uv-avatar v-if="dataSource.mmType==='mm_type_one'" :src="dataSource.mmImg1" size="30"></uv-avatar>
				<uv-avatar-group :urls="[dataSource.mmImg1,dataSource.mmImg2]" size="30" gap="0.4" v-if="
						dataSource.mmType==='mm_type_two'"></uv-avatar-group> -->
				<view class="count mx-small">
					<view class="d-flex d-flex-aic">
						<uni-icons type="heart-filled" size="14" color="#fff" class="mr-small"></uni-icons>
						<view class='font-fs12 color-white'>{{dataSource.memorialValue}}</view>
					</view>
					<view class="d-flex d-flex-aic">
						<uni-icons type="eye-filled" size="14" color="#fff" class="mr-small"></uni-icons>
						<view class='font-fs12 color-white'>{{dataSource.mmNum}}</view>
					</view>
				</view>
				<view class="" v-if="dataSource.meT==='0'">
					<view class="btn" v-if="isFamliy" @click="navigateToUpToInviteCreate(id)">
						邀请亲友
					</view>
					<view class="btn" v-else @click="isFamliy_handleClick">
						成为亲友
					</view>
				</view>

				<view class="btn fllow" v-if="dataSource.meT==='1'" @click="focus_handleClick">
					关注
				</view>
			</view>


			<template v-if="pageCurrent == 1">
				<view class="bg page-wrap">
					<view class="stele-bg page-wrap">
						<image class="image image-fill-x"
							:src="dataSource.backgroundImg || 'http://memories-s1.oss-cn-beijing.aliyuncs.com/2023/12/213d43857835fb4276aada9efe48c1c552背景图31.jpg'"
							mode="widthFix">
						</image>
					</view>
					<view :class="['stele']">
						<image v-if="dataSource.mmType==='mm_type_one'" class="image image-fill-x"
							src="@/assets/pic/stele1.png" mode="widthFix">
						</image>
						<image v-else class="image image-fill-x" src="@/assets/pic/stele2.png" mode="widthFix">
						</image>
					</view>
				</view>

				<view :class="['music', {'con':isMusic}]" @click="isMusic_handleChange">
					<uv-icon v-show="isMusic" name="volume-fill" size="24" color="#767a86"></uv-icon>
					<uv-icon v-show="!isMusic" name="volume-off-fill" size="24" color="#767a86"></uv-icon>
				</view>

				<view class="lighting">
					<view :class="['item', {'grayscale': lightingList[index]&&lightingList[index].length===0}]"
						@click="lightingBtnList_handleClick(index)" v-for="(item, index) in everlastingLampList"
						:key="index">
						<image v-if="lightingList[index]&&lightingList[index].length" class="image image-fill"
							:src="item.elImg" mode="scaleToFill">
						</image>
						<image v-else class="image image-fill" :src="item.elImg2" mode="scaleToFill">
						</image>
						<text class="total">{{lightingList[index]&&lightingList[index].length}}</text>
					</view>
				</view>

				<view class="btn-list">
					<view class="item bg-1" @click="navigateToSpace(id)">
						<uni-icons color="#fff" type="home-filled" size="30"></uni-icons>
						<view class="label">
							空间
						</view>
					</view>
					<view class="item bg-2" @click="navigateToSpaceDetails(id, 1)">
						<uni-icons color="#fff" type="images-filled" size="30"></uni-icons>
						<view class="label">
							相册
						</view>
					</view>
					<view class="item bg-3" @click="navigateToSpaceDetails(id, 2)">
						<uni-icons color="#fff" type="videocam-filled" size="30"></uni-icons>
						<view class="label">
							视频
						</view>
					</view>
					<!-- <view class="item bg-4" @click="navigateToMemorialRecord(dataSource.id, 0)">
            <uni-icons color="#fff" type="staff-filled" size="30"></uni-icons>
            <view class="label">
              缅怀
            </view>
          </view> -->
					<view class="item bg-5" @click="navigateToWishingTree">
						<!-- <uni-icons color="#fff" type="staff-filled" size="30"></uni-icons> -->
						<image src="@/assets/pic/xuyuan.png" mode="widthFix" class="image xuyuan-img">
						</image>
						<view class="label">
							许愿
						</view>
					</view>
				</view>

				<view class="btn-list-bottom-sub" v-show="jibaiShow">
					<view class="item bg-1" @click="playGif('sub1')">
						<image src="@/assets/pic/sub-1.png" mode="widthFix" class="image image-fill-x">
						</image>
					</view>
					<view class="item bg-2" @click="playGif('sub2')">
						<image src="@/assets/pic/sub-2.png" mode="widthFix" class="image image-fill-x">
						</image>
					</view>
					<view class="item bg-3" @click="playGif('sub3')">
						<image src="@/assets/pic/sub-3.png" mode="widthFix" class="image image-fill-x">
						</image>
					</view>
					<view class="item bg-3" @click="playGif('sub4')">
						<image src="@/assets/pic/sub-4.png" mode="widthFix" class="image image-fill-x">
						</image>
					</view>
				</view>

				<view class="btn-list-bottom">
					<view class="item bg-1" @click="msg_handleClick">
						<view class='gongpin-img'>
							<uni-icons class="msg" type="chatboxes-filled" size="21" color="#ffc107"></uni-icons>
						</view>
						<view class="label">
							留言
						</view>
					</view>
					<view class="item bg-2" @click="oblation_handleClick">
						<view class='gongpin-img'>
							<image src="@/assets/pic/gongpin.png" mode="widthFix" class="image image-fill-x gp">
							</image>
						</view>
						<view class="label">
							贡品
						</view>
					</view>
					<view class="item bg-3" @click="navigateToLighting(id)">
						<view class='gongpin-img'>
							<image src="@/assets/pic/diandeng.png" mode="widthFix" class="image image-fill-x dd">
							</image>
						</view>
						<view class="label">
							点灯
						</view>
					</view>
					<view class="item bg-3" @click="navigateToLightCandle(id)">
						<view class='gongpin-img'>
							<image src="@/assets/pic/zhuguang.png" mode="widthFix" class="image image-fill-x">
							</image>
						</view>
						<view class="label">
							烛光
						</view>
					</view>
					<view class="item bg-3" @click="jibaiShow = !jibaiShow">
						<view class='gongpin-img'>
							<image src="@/assets/pic/jibai.png" mode="widthFix" class="image image-fill-x">
							</image>
						</view>
						<view class="label">
							祭拜
						</view>
					</view>
					<view class="item bg-4" @click="navigateToUpToRecommendCreate(id)">
						<view class="gongpin-img">
							<uni-icons type="redo-filled" size="24" color="#ffc107"></uni-icons>
						</view>
						<view class="label">
							分享
						</view>
					</view>
				</view>

				<view class="center-layout">
					<view :class="['center-avatar', {small: dataSource.mmType === 'mm_type_two'}]">
						<view class="item">
							<view class="avatar">
								<image :src="dataSource.mmImg1" mode="scaleToFill" class="image image-fill"></image>
							</view>
							<view class="font-wb mt-normal name font-fs14">
								{{dataSource.mmName1}}
							</view>
							<view class="mt-small font-fs12 date">
								{{dataSource.mmBorn1.slice(0,4) + '-' + dataSource.mmPassAwayDate1.slice(0,4)}}
							</view>
						</view>
						<view class="item" v-if="dataSource.mmType === 'mm_type_two'">
							<view class="avatar">
								<image :src="dataSource.mmImg2" mode="scaleToFill" class="image image-fill"></image>
							</view>
							<view class="font-wb mt-normal name font-fs14">
								{{dataSource.mmName2}}
							</view>
							<view class="mt-small font-fs12 date">
								{{dataSource.mmBorn2.slice(0,4) + '-' + dataSource.mmPassAwayDate2.slice(0,4)}}
							</view>
						</view>
					</view>
				</view>

				<view class="center-bottom">
					<view class="row-box row-1">
						<view class="item" v-for="(item, index) in oblationList.filter((_,i) => parseInt(i / 5) === 0)"
							:key="index">
							<image :src="item.olImg" mode="scaleToFill" class="image image-fill"></image>
							<view class="item-count" v-if="item.count>1">x{{item.count}}</view>
						</view>
					</view>
					<view class="row-box row-2">
						<view class="item" v-for="(item, index) in oblationList.filter((_,i) => parseInt(i / 5) === 1)"
							:key="index">
							<image :src="item.olImg" mode="scaleToFill" class="image image-fill"></image>
							<view class="item-count" v-if="item.count>1">x{{item.count}}</view>
						</view>
					</view>
					<view class="row-box row-3">
						<view class="item" v-for="(item, index) in oblationList.filter((_,i) => parseInt(i / 5) === 2)"
							:key="index">
							<image :src="item.olImg" mode="scaleToFill" class="image image-fill"></image>
							<view class="item-count" v-if="item.count>1">x{{item.count}}</view>
						</view>
					</view>
					<view class="row-box row-4">
						<view class="item" v-for="(item, index) in oblationList.filter((_,i) => parseInt(i / 5) === 3)"
							:key="index">
							<image :src="item.olImg" mode="scaleToFill" class="image image-fill"></image>
							<view class="item-count" v-if="item.count>1">x{{item.count}}</view>
						</view>
					</view>
				</view>

				<view class="left-candle-light" v-if="candleLightList.length"
					:style="`left:${dataSource.mmType==='mm_type_two'?'25%':'26%'}`">
					<image :src="candleLightList[0].olImg" mode="widthFix" class="image image-fill-x">
					</image>
				</view>

				<view class="right-candle-light" v-if="candleLightList.length"
					:style="`right:${dataSource.mmType==='mm_type_two'?'25%':'26%'}`">
					<image :src="candleLightList[0].olImg" mode="widthFix" class="image image-fill-x">
					</image>
				</view>

				<image :src="currentGifUrl" class="jibai-gif" mode="widthFix"></image>

				<view class="right-bottom-lantern" @click="lantern_handleClick">
					<image v-if="lanternList.length" src="@/assets/pic/right-bottom-lantern.png" mode="widthFix"
						class="image image-fill-x">
					</image>
					<image v-else src="@/assets/pic/right-bottom-lantern0.png" mode="widthFix"
						class="image image-fill-x">
					</image>
				</view>

				<view class="left-bottom-festival" @click="festival_handleClick" v-if="festivalList.length">
					<image :src="festivalList[0].fCardImg" mode="scaleToFill" class="image image-fill"></image>
				</view>

				<view class="ai-card" @click="aiCard_handleClick" v-if="isFamliy && dataSource.meT==='0'">
					<image src="@/assets/pic/ai.gif" mode="scaleToFill" class="image image-fill"></image>
				</view>

				<view class="left-lantern" v-if="lanternList.length"
					:style="`left:${dataSource.mmType==='mm_type_two'?'22%':'27%'}`">
					<image class="image image-fill-x" src="@/assets/pic/lantern.png" mode="widthFix"></image>
					<text class="text"
						v-if="lanternList[lanternList.length-1].olName&&lanternList[lanternList.length-1].olName.split(',').length==2">{{lanternList[lanternList.length-1].olName.split(',')[0]}}</text>
				</view>

				<view class="right-lantern" v-if="lanternList.length"
					:style="`right:${dataSource.mmType==='mm_type_two'?'22%':'27%'}`">
					<image class="image image-fill-x" src="@/assets/pic/lantern.png" mode="widthFix"></image>
					<text class="text"
						v-if="lanternList[lanternList.length-1].olName&&lanternList[lanternList.length-1].olName.split(',').length==2">{{lanternList[lanternList.length-1].olName.split(',')[1]}}</text>
				</view>

			</template>

			<template v-if="pageCurrent == 0">
				<scroll-view scroll-y="true" class="my-scroll-view">
					<view>
						<view class="banner"></view>
						<view class="avatar-group">
							<view class="item">
								<image class='image image-fill' mode="scaleToFill" :src="dataSource.mmImg1">
								</image>
								<view class="font-wb mt-small name">
									{{dataSource.mmName1}}
								</view>
								<view class="font-fs12  date">
									{{dataSource.mmBorn1.slice(0,4) + '-' + dataSource.mmPassAwayDate1.slice(0,4)}}
								</view>
							</view>
							<view class="item" v-if="dataSource.mmType === 'mm_type_two'">
								<image class='image image-fill' mode="scaleToFill" :src="dataSource.mmImg2">
								</image>
								<view class="font-wb mt-small name">
									{{dataSource.mmName2}}
								</view>
								<view class="font-fs12  date">
									{{dataSource.mmBorn2.slice(0,4) + '-' + dataSource.mmPassAwayDate2.slice(0,4)}}
								</view>
							</view>
						</view>
						<view class="main first-main">
							<view class="box" v-if="dataSource.epitaph">
								<view class="head">
									<view class="icon"></view>
									<view class="font-fs18 title">墓志铭</view>
								</view>
								<view class="body font-fs14">
									{{dataSource.epitaph}}
								</view>
							</view>

							<view class="box" v-if="dataSource.desc">
								<view class="head">
									<view class="icon"></view>
									<view class="font-fs18 title">人物简介</view>
								</view>
								<view class="body font-fs14">
									{{dataSource.desc}}
								</view>
							</view>
						</view>
						<view class="main">
							<view class="banner-title">
								纪念相册
							</view>
							<view class="banner-content">
								<view class="empty" v-if="!imageList.length">
									<view class="png">
										<image class="image image-fill" src="@/assets/pic/memorialHall-emtpy.png"
											mode="widthFix"></image>
									</view>
									<view class="mt-big color-888 d-flex d-flex-aic"
										@click="navigateToSpaceDetails(meMemorialId,1)">
										去添加照片<uv-icon name="arrow-right" color="#888888" class="ml-small"></uv-icon>
									</view>
								</view>
								<uv-album :urls="imageList.filter((o,i)=>i<2).map(o=>o.ccContent)"></uv-album>
							</view>
						</view>
						<view class="main last-main">
							<view class="banner-title">
								纪念视频
							</view>
							<view class="banner-content">
								<view class="empty" v-if="!videoList.length">
									<view class="png">
										<image class="image image-fill" src="@/assets/pic/memorialHall-emtpy.png"
											mode="widthFix"></image>
									</view>
									<view class="mt-big color-888 d-flex d-flex-aic"
										@click="navigateToSpaceDetails(meMemorialId,2)">
										去添加视频<uv-icon name="arrow-right" color="#888888" class="ml-small"></uv-icon>
									</view>
								</view>

								<view class="videoList">
									<view v-for="(item, index) in videoList.filter((o,i)=>i<1)" :key="index"
										class="item">
										<view class="video-box">
											<video class="video" :src="item.ccContent" controls>
											</video>
										</view>
										<view class="text">
											{{item.ccTitle}}
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
			</template>
		</view>

		<view class="loading" v-if="!isVerify">
			<uv-loading-icon class="content" :show="true" vertical size='36' textSize='18' text='验证中-加载中'
				timing-function="linear"></uv-loading-icon>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.page-content-posa {
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.my-scroll-view {
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
	}

	.slot-content {
		textarea {
			color: #333 !important;
		}
	}

	.navbar-cnm {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 15px;
		justify-content: space-between;
		z-index: 100;
		background-color: rgba(255, 255, 255, 0.8);

		.nav-left {
			// color: #fff;
		}

		.nav-right {}

		.nav-center {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: max-content;
			height: max-content;
		}

		.menu {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 20;

			&::after {
				content: "";
				display: block;
				position: absolute;
				top: 44px;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, .4);
			}

			.show-box {
				position: absolute;
				top: 44px;
				background-color: rgba(255, 255, 255, 0.8);
				border-radius: 8px;
				padding: 8px;
				right: 15px;
				width: max-content;
				display: flex;
				flex-direction: column;
				z-index: 100;

				.item {
					margin: 4px;
				}
			}
		}
	}

	.msg-scroll-view {
		max-height: 70%;

		.msg {
			word-break: break-all;
		}
	}

	.emtpy {
		width: 200px;
		margin: 0 auto;
		padding-top: 30px;
	}

	.loading {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #000;

		.content {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	}

	.family-popup {
		width: 300px;
		padding: 40px 0;

		.color-333 {
			color: #333333;
		}
	}

	.oblationdesc-popup {
		padding: 20px 40px;

		.pic {
			width: 70px;
			height: 70px;
			border-radius: 8px;
			overflow: hidden;
		}

		.name {}

		.color-333 {
			color: #333333;
		}
	}

	.guide-popup {
		width: 300px;
		padding: 40px 0 10px;

		.box {
			text-align: center;
		}

		.color-333 {
			color: #333333;
		}
	}

	.festival-popup {
		width: 300px;

		.swiper-item {}

		.box {
			height: 130px;
			border-bottom-right-radius: 100% 60px;
			border-bottom-left-radius: 100% 60px;
			overflow: hidden;
		}

		.title,
		.desc {
			text-align: center;
		}

		.desc {
			text-indent: 2em;
		}

		.color-333 {
			color: #333333;
		}
	}

	.lighting-popup {
		width: 330px;

		.lighting-banner {
			position: relative;

			.lighting {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: max-content;
				height: max-content;

				.text {
					color: #fff;
				}

				.icon {
					width: 80px;
					height: 80px;
					padding: 2px;
					box-sizing: border-box;
					border-radius: 50%;
					overflow: hidden;
					background-color: #fff;

					.image {
						border-radius: 50%;
						overflow: hidden;
					}
				}
			}

		}

		.lighting-content {
			height: 350px;

			.item {
				color: #666666;
				white-space: nowrap;

				.text {
					color: #333333;
				}

				.last-time {
					color: #1ab742;
				}
			}
		}
	}

	.lantern-popup {
		width: 330px;

		.lantern-content {
			height: 350px;

			.item {
				color: #666666;
				white-space: nowrap;
				overflow: hidden;

				.text {
					color: #333333;
				}

				.last-time {
					color: #1ab752;
				}
			}
		}
	}

	.msg-popup {
		.head {
			background-color: #1ab752;
			color: #fff;
			height: 40px;
		}

		.inp {
			background-color: #f0efed;
			padding: 5px 10px !important;
		}

		.body {
			background-color: #f0f0f0;
			height: 200px;
			box-sizing: border-box;
		}
	}

	.oblation-popup {

		.head {
			background-color: #1ab752;
			color: #fff;
			height: 50px;
		}

		.foot {
			background-color: #fff;
			color: #303133;
			height: 50px;
			border-top: 1px solid #dddddd;

			.icon {
				width: 20px;
			}

			.btn {
				color: #4a97fe;
			}
		}

		.body {
			height: 240px;
			background-color: #fff;


			::v-deep.uni-scroll-view-content {
				display: flex;
				flex-wrap: wrap;
			}


			.item {
				width: 25%;
				height: 130px;
				border-radius: 10px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.pic {
					width: 60px;
					height: 60px;
				}

				.title {
					color: #303133;
				}

				.money {
					color: #ff0000;
					margin-top: 1px;
				}

				.date {
					color: #999999;
					margin-top: 3px;
				}

				&.con {
					background-color: #e1efe1;
				}
			}
		}
	}

	.verify-popup {
		background-color: #fff;
		width: 330px;
		padding: 30px 0 15px;
	}

	.over {
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;

			.stele-bg {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}

			.stele {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}

		.avatar-group {
			position: absolute;
			top: 195px;
			width: 260px;
			left: 0;
			right: 0;
			display: flex;
			margin: auto;
			z-index: 2;
			justify-content: center;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-left: 20px;

				&:first-child {
					margin-left: 0;
				}

				.image {
					border: 2px solid #795548;
					padding: 1px;
					box-sizing: border-box;
					width: 100px;
					height: 140px;
				}

				.name {
					color: #000;
				}

				.date {
					color: #999999;
				}
			}
		}

		.main {
			background-color: #fff;
			padding: 15px;
			// margin-top: 10px;
			margin: 10px 0;

			&.first-main {
				padding-top: 110px;
				margin-top: 0;
			}

			&.last-main {
				margin-bottom: 10px;
			}

			.banner-title {
				margin: 10px auto;
				color: #303133;
				width: 180px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid #12b886;
			}

			.banner-content {
				width: max-content;
				margin: 0 auto;

				.empty {
					display: flex;
					flex-direction: column;
					align-items: center;

					.png {
						width: 220px;
						padding: 20px 0 10px;
					}

					.color-888 {
						color: #888888;
					}
				}

				.videoList {

					.item {
						padding: 15px;
						border-radius: 15px;
						margin-bottom: 10px;
						background-color: #f5f5f5;

						.video-box {
							width: 100%;
							border-radius: 15px;
							overflow: hidden;

							.video {
								width: 100%;
							}
						}

						.text {
							width: max-content;
							margin: auto;
							height: 30px;
							line-height: 30px;
							border-bottom: 1px solid #333;
						}
					}
				}

			}



			.box {
				margin-top: 30px;

				.head {
					height: 38px;
					display: flex;
					align-items: center;

					.icon {
						width: 2px;
						height: 20px;
						background-color: #000;
						margin-right: 12px;
					}
				}

				.body {
					background-color: #fef0f0;
					padding: 10px;
				}
			}
		}

		.color-white {
			color: #fff;
		}

		.info {
			position: absolute;
			top: 58px;
			left: 20px;
			padding: 5px;
			border-radius: 25px;
			background-color: rgba(0, 0, 0, .4);
			width: max-content;
			display: flex;
			align-items: center;

			.btn {
				border-radius: 15px;
				height: 30px;
				font-size: 12px;
				padding: 0 10px;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #41ba70;

				&.fllow {
					color: #e16e66;
					background-color: #ffffff;
				}
			}
		}

		.music {
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: #ffffff;
			position: absolute;
			top: 58px;
			right: 20px;
			transform: rotateZ(0deg);

			@keyframes move_eye {
				0% {
					transform: rotateZ(0deg);
				}

				25% {
					transform: rotateZ(45deg);
				}

				50% {
					transform: rotateZ(0deg);
				}

				75% {
					transform: rotateZ(-45deg);
				}

				100% {
					transform: rotateZ(0deg);
				}
			}

			&.con {
				animation: 4s linear 0s infinite move_eye;
			}
		}

		.lighting {
			position: absolute;
			top: 20%;
			left: 10px;
			width: 120rpx;
			height: calc(72rpx * 4);

			.item {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8px;
				overflow: hidden;
				margin-top: 24rpx;
				background-color: #3b1105;
				position: relative;

				&.grayscale {
					filter: grayscale(100%);
				}

				.total {
					position: absolute;
					font-size: 12px;
					display: block;
					bottom: 4px;
					right: 5px;
					color: #fff;
				}

				&:first-child {
					margin-top: 0;
				}
			}
		}

		.btn-list {
			position: absolute;
			top: 20%;
			right: 10px;
			width: 120rpx;
			height: calc(72rpx * 4);

			.item {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8px;
				overflow: hidden;
				margin-top: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 12px;

				.xuyuan-img {
					width: 56rpx;
				}

				&:first-child {
					margin-top: 0;
				}

				&.bg-1 {
					background-image: linear-gradient(#5efbcc, #12b886);
				}

				&.bg-2 {
					background-image: linear-gradient(#ffa664, #fe8328);
				}

				&.bg-3 {
					background-image: linear-gradient(#fb7a84, #fd3f4e);
				}

				&.bg-4 {
					background-image: linear-gradient(#82b8ff, #4a97fe);
				}

				&.bg-5 {
					background-image: linear-gradient(#990808, #de2827);
				}
			}
		}

		.btn-list-bottom {
			position: absolute;
			bottom: 20px;
			left: 0;
			right: 0;
			margin: auto;
			width: max-content;
			display: flex;
			z-index: 100;

			.item {
				width: 52px;
				height: 52px;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 5px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 12px;
				color: #ffc107;
				background-color: rgba(0, 0, 0, .4);

				.gongpin-img {
					width: 24px;
					height: 24px;

					.msg {
						position: relative;
						top: 6rpx;
					}

					.gp {
						position: relative;
						top: 2rpx;
					}

					.dd {
						width: 29px;
						position: relative;
						bottom: 6rpx;
						right: 4rpx;
					}

				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.jibai-gif {
			width: 30%;
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 100;
			bottom: 60px;
			pointer-events: none;
		}

		.btn-list-bottom-sub {
			position: absolute;
			bottom: 77px;
			left: 0;
			right: 0;
			margin: auto;
			width: max-content;
			display: flex;
			z-index: 100;

			.item {
				width: 42px;
				margin-right: 12px;

				.icon-btn {
					width: 100%;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.tab-list {
			position: absolute;
			top: 110px;
			left: 0;
			right: 0;
			margin: auto;
			width: max-content;
			display: flex;
			height: max-content;
			z-index: 100;

			.item {
				background-color: rgba(0, 0, 0, .4);
				color: #fff;
				width: max-content;
				padding: 5px 10px;
				margin: 0 5px;
				border-radius: 6px;
				overflow: hidden;

				&.con {
					background-color: rgba(0, 10, 100, .7);
					font-weight: bold;
				}
			}
		}

		.banner {
			height: 236px;
			background-image: url(@/assets/pic/memorialHall-banner.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.center-layout {
			position: absolute;
			bottom: 600rpx;
			left: 0;
			right: 0;
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(100% - 200px);

			.center-avatar {
				width: 140px;
				height: 127px;
				display: flex;
				justify-content: space-around;

				&.small .item {
					transform-origin: top;
					transform: scale(.8);

					&:nth-child(1) {
						position: relative;
						left: 10rpx;
					}

					&:nth-child(2) {
						position: relative;
						right: 10rpx;
					}
				}

				.item {
					width: 60px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					white-space: nowrap;
				}

				.avatar {
					width: 60px;
					height: 80px;
					box-sizing: border-box;
					padding: 2px;
					background-color: #fff;
				}

				.name {
					color: #cf9f49;
				}

				.date {
					color: #fff;
				}
			}
		}

		.center-bottom {
			position: absolute;
			bottom: calc(470rpx - 250rpx);
			left: 0;
			right: 0;
			margin: auto;
			width: 100%;
			height: 250rpx;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.row-box {
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				width: 400rpx;
			}

			.row-1 {
				height: 50rpx;

				.item {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.row-2 {
				height: 55rpx;

				.item {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.row-3 {
				height: 60rpx;

				.item {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.row-4 {
				height: 65rpx;

				.item {
					width: 75rpx;
					height: 75rpx;
				}
			}

			.item {
				flex-shrink: 0;
				padding: 2px;
				box-sizing: border-box;
				overflow: hidden;
				position: relative;

				.item-count {
					position: absolute;
					z-index: 100;
					right: 0;
					font-size: 12px;
					color: #cf9f49;
					bottom: 0;
				}
			}
		}

		.left-candle-light,
		.right-candle-light {
			position: absolute;
			bottom: 424rpx;
			width: calc((100% - 250px) / 5);
			pointer-events: none;
		}

		.right-bottom-lantern {
			position: absolute;
			right: 15px;
			bottom: 450rpx;
			width: 45px;
			transform: translateY(100%);
		}

		.left-bottom-festival {
			position: absolute;
			left: 15px;
			bottom: 450rpx;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
			animation: yes 3s linear infinite;

			@keyframes yes {
				0% {
					transform: translateY(100%) rotateZ(0deg);
				}

				25% {
					transform: translateY(100%) rotateZ(-15deg);
				}

				50% {
					transform: translateY(100%) rotateZ(0deg);
				}

				75% {
					transform: translateY(100%) rotateZ(15deg);
				}

				100% {
					transform: translateY(100%) rotateZ(0deg);
				}
			}

		}

		.ai-card {
			position: absolute;
			right: 30px;
			bottom: 460rpx;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
		}

		.left-lantern {
			position: absolute;
			bottom: 700rpx;
			// left: 22%;
			width: 35px;

			.text {
				position: absolute;
				top: 15px;
				left: 0;
				right: 0;
				width: 1em;
				height: 4em;
				font-size: 12px;
				margin: auto;
				transform: scale(.7);
				color: #fff;
				word-break: break-all;
			}
		}

		.right-lantern {
			position: absolute;
			bottom: 700rpx;
			// right: 22%;
			width: 35px;

			.text {
				position: absolute;
				top: 15px;
				left: 0;
				right: 0;
				width: 1em;
				height: 4em;
				font-size: 12px;
				margin: auto;
				transform: scale(.7);
				color: #fff;
				word-break: break-all;
			}
		}
	}
</style>